<template id="payingNow">
    <div class="payingNow">
      <form action="" class="payingNowForm">
        <div class="row payingNowList">
          <div class="col cardNumberInfo">
            <label for="cardNumber" class="payingNowLaber">银行卡号</label>
            <input type="text" name="cardNumber" class="cardNumber" id="cardNumber" :value="payNowObj.cardNo" readonly>
          </div>

        </div>

        <div class="row payingNowList">
          <div class="col cardNumberInfo" style="border-bottom: none">
            <label for="phoneValidata" class="payingNowLaber">验证码</label>
            <input type="number" name="phoneValidata" class="phoneValidata" v-model.trim="phoneValidata" id="phoneValidata" value="" placeholder="请输入验证码">
            <input type="button" name="phoneValidataBtn" :disabled="isDisabled" class="phoneValidataBtn" ref="phoneValidataBtnBox" @click="sendValidata" id="phoneValidataBtn" v-model="sendNumData">
          </div>

        </div>
      </form>
      <input type="button" value="缴费" ref="payingNowMenu"   class="payingNowMenu" @click="paying" :disabled = "disClick">

      <!--&lt;!&ndash;缴费成功或失败哦提示框&ndash;&gt;-->
      <!--&lt;!&ndash;<div class="isShowingBox" v-show="isShowingBox"></div>&ndash;&gt;-->
      <!--<div class="circleProgress_wrapper" v-if="showPayInfo">-->
        <!--&lt;!&ndash;<div class="wrapper right">&ndash;&gt;-->
          <!--&lt;!&ndash;<div class="circlr rightcircle"></div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="wrapper left">&ndash;&gt;-->
          <!--&lt;!&ndash;<div class="circlr leftcircle"></div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--<div class="payingLoding">-->
          <!--<img src="../../../static/image/payingLoding.gif" alt="">-->
        <!--</div>-->
        <!--<div class="pic">-->
          <!--<img  src="../../../static/image/success3.png" alt="" v-if="isSucess">-->
          <!--<img  src="../../../static/image/cry3.png" alt="" v-else>-->
          <!--&lt;!&ndash;<span class="paynow">正在支付...</span>&ndash;&gt;-->
          <!--<span  class="paySuccess" v-if="isSucess" style="font-weight: bold;color: #fff">支付成功</span>-->
          <!--<span class="paySuccess" v-else style="font-weight: bold;color: #fff">付款失败</span>-->
        <!--</div>-->
      <!--</div>-->
    </div>
</template>

<script>


  import { MessageBox } from 'mint-ui';

    export default {
        data(){
            return {
              sendNumData:'获取验证码',
              currentTime:60,
              isDisabled:false,
              disClick:false,
              showPayInfo:false,
              isSucess:true,
              isShowingBox:false,




              phoneValidata:'',
              payNowObj: {}
            }
        },
        methods: {

          //验证短信验证码
          phoneNumTest: function () {
            var testNum = false;
            if(this.phoneValidata){
              this.$post(this.$urlAll.validate_message, {code: this.phoneValidata}).then(function (response) {
                if(response.t == '000000'){
                  testNum = true;
                } else {
                  MessageBox('提示', response.t);
                  testNum = false;
                }
              });
            } else {
              MessageBox('提示', '亲,验证码不能为空哦～');
              testNum = false;
            }
            return testNum;
          },
            /**
             * 点击缴费按钮 逻辑函数
             * */
          paying:function () {


              // //this.$router.push('/pay/successDaily')
              // var options = {
              //   feeUserId:this.payNowObj.feeUserId,
              //   payId: this.payNowObj.payId,
              //   corpId: this.payNowObj.corpId,
              //   projectId: this.payNowObj.projectId
              // };
              //
              // this.$post(this.$urlAll.kj_boc_pay, options).then(function (response) {
              //
              //
              // })


            // console.log(123);
            //   this.$router.push('/pay/successDaily')
              // if(this.phoneValidata){
              //     if(this.phoneValidata == 1){
              //         this.isShowingBox = true;
              //       var setThis = this;
              //       this.disClick = true;
              //       this.showPayInfo = true;
              //       setTimeout(function () {
              //         setThis.showPayInfo = false;
              //         setThis.disClick = false;
              //         this.isShowingBox = false;
              //         setThis.$router.push('/pay/successDaily')
              //       },2300)
              //     }
              //   if(this.phoneValidata == 2){
              //     var setThis = this;
              //     this.disClick = true;
              //     this.showPayInfo = true;
              //     this.isSucess = false;
              //     this.isShowingBox = true;
              //     setTimeout(function () {
              //       setThis.showPayInfo = false;
              //       setThis.disClick = false;
              //       setThis.isSucess = true;
              //       setThis.isShowingBox = false;
              //     },2300)
              //   }
              //   if(this.phoneValidata != 1 && this.phoneValidata != 2){
              //     alert("验证码请输入 1 或者 2")
              //   }
              //
              // }else {
              //     alert("验证码不正确")
              // }

          },

          /**
           * 点击发送验证码
           */
        sendValidata:function () {
            var _self = this;

            //获取短信验证码
            this.$post(this.$urlAll.get_message).then(function (response) {


            })

            var timer = setInterval(function () {
                if(_self.currentTime>0){
                  _self.currentTime--;
                  _self.sendNumData = "请等待(" + _self.currentTime + ')s';
                  _self.isDisabled = true;
                }else {
                    clearInterval(timer);
                  _self.isDisabled = false;
                  _self.currentTime = 60;
                  _self.sendNumData = "获取验证码";
                }

            },1000)
      }
        },
      created:function () {
        this.payNowObj = this.$route.query;
        console.log(this.payNowObj);
      }
    }
</script>

<style scoped>
  @import "../../style/common.css";
  @import "../../assets/css/iconfont.css";
  /*弹出提示框开始*/
  .circleProgress_wrapper{
    width: 1.5rem;
    height: 1.5rem;
    background-color: #cbcbcb;
    position: fixed;
    left: 50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-border-radius:0.1rem;
    -moz-border-radius:0.1rem;
    border-radius:0.1rem;

  }
  .payingLoding{
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    -webkit-animation: show_words 1s ease-in-out 1;
    -o-animation: show_words 1s ease-in-out 1;
    animation: show_words 1s ease-in-out 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

  }
  .payingLoding img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  @-webkit-keyframes show_words{
    0%,50%,90%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
  @-webkit-keyframes show_pic{
    0%,50%,90%{
      opacity: 0;
    }
    100%{
      opacity:1;
    }
  }
  @-webkit-keyframes show_success{
    0%,50%,90%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  @-webkit-keyframes hiddenBox{
    0%,50%,99%{
      visibility: visible;
    }
    100%{
      visibility: hidden;
    }
  }
  .pic{
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    left: 50%;
    top: 45%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center
  }
  .pic img{
    width: 100%;
    height: 100%;
    -webkit-animation: show_pic 1.5s ease-in-out 1;
    -o-animation: show_pic 1.5s ease-in-out 1;
    animation: show_pic 1.5s ease-in-out 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

  }
  .pic .paynow{
    width: 100%;
    color: #666;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-animation: show_words .75s ease-in-out 1;
    -o-animation: show_words .75s ease-in-out 1;
    animation: show_words .75s ease-in-out 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  .paySuccess{
    color: #333;
    -webkit-animation: show_success 1.5s ease-in-out 1;
    -o-animation: show_success 1.5s ease-in-out 1;
    animation: show_success 1.5s ease-in-out 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  /*弹出提示框结束*/
  .payingNowList{
    height: 0.44rem;
    background-color: #ffffff;
    line-height: 0.44rem;
    padding-left: 0.1rem;
    position: relative;
  }
  .payingNowForm{
    height: 0.44rem;
    margin-top: 0.1rem;
  }
  .cardNumber{
    border: none;
    color: #999;
    font-size: 0.13rem;
    width: 60%;
  }
  .payingNowLaber{
    display: inline-block;
    width: 0.87rem;
    font-size: 0.14rem;
    color: #333;

  }
  .cardNumberInfo{
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  .phoneValidata{
    border: none;
    color: #999;
  }
  .phoneValidataBtn{
    height: 0.28rem;
    width: 0.86rem;
    border: none;
    outline: none;
    background-color: #ff4444;
    -webkit-border-radius:0.05rem;
    -moz-border-radius:0.05rem;
    border-radius:0.05rem;
    color: #fff;
    font-size: 0.13rem;
    position: absolute;
    right: 0.1rem;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .payingNowMenu{
    width: 2.93rem;
    height: 0.44rem;
    border: none;
    background-color: #ff4444;
    font-size: 0.16rem;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    outline: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 1.38rem;
  }
</style>
